<template>
  <el-upload
    class="upload-demo"
    :on-preview="handlePreview"
    :action="'1212'"
    :on-remove="handleRemove"
    :file-list="fileList"
    list-type="picture"
    :drag="true"
    :limit="4"
    @before-upload="isFileType"
    @on-exceed="onExceed"
    :auto-upload="false"
    accept=".jpeg,.png,.gif,.bmp,.pdf,.jpg,.JPG,.JPEG,.PNG,.GIF,.BMP,.PDF"
    :http-request="customUpload"
  >
    <el-button size="small" type="primary">点击上传</el-button>
    <div slot="tip" class="el-upload__tip">
      只能上传 jpg/png/gif/bmp/pdf 文件，且不超过 500KB
    </div>
  </el-upload>
</template>

<script>
import { Message } from 'element-ui';
import { client } from './ossClient'; // 导入 OSS 客户端

export default {
  props: {
    getUrl: {
      type: Function,
      default: () => {},
      require: false,
    },
  },
  data() {
    return {
      fileList: [],
    };
  },
  methods: {
    /**
     * 文件类型和大小校验
     */
    isFileType(file) {
      const allowedTypes = [
        'image/jpeg',
        'image/png',
        'image/gif',
        'image/bmp',
        'application/pdf',
      ];
      const maxSize = 500 * 1024; // 500KB

      // 检查文件类型
      if (!allowedTypes.includes(file.type)) {
        Message.error('文件类型不支持！只允许上传 jpg/png/gif/bmp/pdf 文件');
        return false;
      }

      // 检查文件大小
      if (file.size > maxSize) {
        Message.error('文件大小超出限制！请上传不超过 500KB 的文件');
        return false;
      }

      // 如果通过校验，返回 true
      return true;
    },

    /**
     * 文件数量超出限制时的提示
     */
    onExceed() {
      Message.error('文件的数量已经达到最大限制（4 个），无法继续上传！');
    },

    /**
     * 删除文件
     */
    handleRemove(file, fileList) {
      this.fileList = this.fileList.filter((item) => item.name !== file.name);
    },

    /**
     * 文件预览
     */
    handlePreview(file) {
      console.log('File previewed:', file);
    },

    /**
     * 自定义上传逻辑
     */
    async customUpload(options) {
      const { file, onSuccess, onError } = options;

      try {
        // 上传到 OSS
        const result = await client.put(`uploads/${file.name}`, file);

        // 更新文件列表
        this.fileList.push({
          name: file.name,
          url: result.url,
        });

        // 通知上传成功
        onSuccess(result);

        // 触发自定义事件，将 URL 传递给父组件
        this.$emit('upload-success', result.url);
      } catch (error) {
        Message.error('上传失败:', error);
        onError(error); // 通知上传失败
      }
    },
  },
};
</script>